import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import { useDictionaryOptions } from './useDictionary';
import request from '@/utils/request';
import type { FieldOption, OptionsConfig } from '@/components/DynamicTable/types';

interface UseFieldOptionsReturn {
  options: FieldOption[];
  loading: boolean;
  error: string | null;
  refresh: () => Promise<void>;
}

/**
 * 字段选项 Hook
 * 支持多种选项来源：静态、字典、API
 * 
 * @example
 * // 使用字典
 * const { options, loading } = useFieldOptions({
 *   source: 'dictionary',
 *   dictionaryCode: 'user_status'
 * });
 * 
 * // 使用 API
 * const { options, loading } = useFieldOptions({
 *   source: 'api',
 *   apiUrl: '/roles',
 *   labelField: 'name',
 *   valueField: 'id'
 * });
 * 
 * // 使用静态选项
 * const { options } = useFieldOptions({
 *   source: 'static',
 *   options: [{ label: '选项1', value: '1' }]
 * });
 */
export function useFieldOptions(config: OptionsConfig | undefined): UseFieldOptionsReturn {
  const [options, setOptions] = useState<FieldOption[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  
  // 使用 useRef 来稳定 config 的引用，避免无限循环
  const configRef = useRef(config);
  useEffect(() => {
    configRef.current = config;
  }, [config]);

  // 使用 useMemo 来稳定 source 和关键配置值
  const source = useMemo(() => config?.source || (config?.options ? 'static' : undefined), [config?.source, config?.options]);
  const apiUrl = useMemo(() => config?.apiUrl, [config?.apiUrl]);
  const dictionaryCode = useMemo(() => config?.dictionaryCode, [config?.dictionaryCode]);
  const staticOptions = useMemo(() => config?.options, [config?.options]);

  // 使用字典（只在有 dictionaryCode 时调用）
  const dictionaryOptions = useDictionaryOptions(dictionaryCode || '');

  // 加载 API 选项
  const loadApiOptions = useCallback(async () => {
    const currentConfig = configRef.current;
    if (!currentConfig?.apiUrl) return;

    setLoading(true);
    setError(null);

    try {
      const method = currentConfig.apiMethod || 'get';
      let response;

      if (method === 'post') {
        response = await request.post(currentConfig.apiUrl, currentConfig.apiParams || {});
      } else {
        response = await request.get(currentConfig.apiUrl, { params: currentConfig.apiParams });
      }

      let data = response.data?.data || response.data || response;
      
      // 如果是分页数据，取 data 字段
      if (data?.data && Array.isArray(data.data)) {
        data = data.data;
      } else if (!Array.isArray(data)) {
        data = [];
      }

      // 如果有转换函数，使用转换函数
      if (currentConfig.apiTransform) {
        setOptions(currentConfig.apiTransform(data));
      } else {
        // 自动转换
        const labelField = currentConfig.labelField || 'name' || 'label';
        const valueField = currentConfig.valueField || 'id' || 'value';
        
        const transformedOptions: FieldOption[] = data.map((item: any) => {
          let label: string;
          
          // 如果有标签模板，使用模板格式化
          if (currentConfig.labelTemplate) {
            label = currentConfig.labelTemplate.replace(/\{(\w+)\}/g, (match, fieldName) => {
              const value = item[fieldName];
              // 格式化数字（价格）
              if (typeof value === 'number' && fieldName.toLowerCase().includes('price')) {
                return value.toFixed(2);
              }
              return value !== null && value !== undefined ? String(value) : '';
            });
          } else {
            label = item[labelField] || item.label || item.name || String(item[valueField]);
          }
          
          return {
            label,
            value: item[valueField] || item.value || item.id,
            disabled: item.disabled,
          };
        });

        setOptions(transformedOptions);
      }
    } catch (err: any) {
      setError(err.message || '获取选项数据失败');
      console.error('Failed to load options from API:', err);
      setOptions([]);
    } finally {
      setLoading(false);
    }
  }, [apiUrl]); // 只依赖 apiUrl，其他通过 configRef 访问

  // 根据来源加载选项
  useEffect(() => {
    if (!source) {
      setOptions([]);
      return;
    }

    switch (source) {
      case 'static':
        // 静态选项
        setOptions(staticOptions || []);
        break;

      case 'dictionary':
        // 字典选项 - 使用 useDictionaryOptions hook
        // 注意：这里不能直接使用 hook，需要在组件中调用
        // 所以这里只设置空数组，实际选项由调用方通过 DictionarySelect 组件处理
        setOptions([]);
        break;

      case 'api':
        // API 选项
        if (apiUrl) {
          loadApiOptions();
        }
        break;

      default:
        // 兼容旧配置：如果有 options，使用静态选项
        if (staticOptions) {
          setOptions(staticOptions);
        }
    }
  }, [source, staticOptions, apiUrl, loadApiOptions]); // 移除 dictionaryOptions.options 依赖

  const refresh = useCallback(async () => {
    if (source === 'api') {
      await loadApiOptions();
    } else if (source === 'dictionary') {
      // 字典选项由 useDictionaryOptions 管理，这里不需要额外操作
    }
  }, [source, loadApiOptions]);

  // 合并 loading 状态
  const isLoading = loading || (source === 'dictionary' && dictionaryOptions.loading);

  return {
    options,
    loading: isLoading,
    error,
    refresh,
  };
}

